<template>
  <div>
    <div class="outmain ba_f dtu">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="同城配送" name="tcps"></el-tab-pane>
        <el-tab-pane label="配送区域" name="psqy"></el-tab-pane>
      </el-tabs>
      <div class="shuju_title mar_b20 mar_t20">
        <div class="shuju_title_text">
          <span>基本设置</span>
        </div>
      </div>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="取餐地址">
          <el-input v-model="form.address" disabled></el-input>
        </el-form-item>
        <el-form-item label="经纬度">
          <el-input v-model="form.lng" disabled style="width: 190px" class></el-input>
          <el-input v-model="form.lat" disabled style="width: 190px" class="mar_l20"></el-input>
        </el-form-item>
        <el-form-item label="预计配送时间">
          <el-input placeholder v-model="form.withinTime" type="number" :disabled="true">
            <template slot="prepend">三公里内</template>
            <template slot="append">分钟</template>
          </el-input>
          <a href="#" class="mar_l20" @click="dialogFormVisible = true">时长设置</a>
        </el-form-item>
        <el-form-item label="配送范围">
          <el-input placeholder="请输入配送范围" v-model="form.range" type="number">
            <template slot="append">km</template>
          </el-input>
        </el-form-item>
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>配送设置</span>
          </div>
        </div>
        <el-form-item label="配送费">
          <el-radio-group v-model="form.type" @change="psType">
            <el-radio label="1">固定金额</el-radio>
            <el-radio label="2">按距离收取</el-radio>
            <el-radio label="3">按区域收取</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label v-show="form.type=='1'">
          <div>
            <el-input placeholder="请输入起送价" v-model="form.fixedStartMoney" type="number">
              <template slot="prepend">起送价</template>
              <template slot="append">元</template>
            </el-input>
          </div>
          <div class="mar_t20">
            <el-input placeholder="请输入金额" v-model="form.money" type="number">
              <template slot="prepend">每单</template>
              <template slot="append">元</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label v-show="form.type=='2'">
          <div>
            <el-form-item label="路径计算方式">
              <el-radio-group v-model="form.calculationType">
                <el-radio label="1">直线距离</el-radio>
                <el-radio label="2">骑行规划距离</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="mar_t20">
            <el-input placeholder="请输入起送价" v-model="form.startMoney" type="number">
              <template slot="prepend">起送价</template>
              <template slot="append">元</template>
            </el-input>
          </div>
          <div class="mar_t20">
            <el-input placeholder="请输入起步价" v-model="form.distanceStartMoney" type="number">
              <template slot="prepend">起步价</template>
              <template slot="append">元</template>
            </el-input>
            <el-input placeholder="请输入公里数" v-model="form.startDistance" type="number">
              <template slot="append">公里，每增加1公里加</template>
            </el-input>
            <el-input placeholder="请输入金额" v-model="form.overstepMoney" type="number">
              <template slot="append">元</template>
            </el-input>
          </div>
          <div class="mar_t20">
            <el-input placeholder="请输入公里数" v-model="form.overstepDistance" type="number">
              <template slot="prepend">超出</template>
              <template slot="append">公里后，每增加1公里加</template>
            </el-input>
            <el-input placeholder="请输入金额" v-model="form.overstepDistanceMoney" type="number">
              <template slot="append">元，最高收取</template>
            </el-input>
            <el-input placeholder="请输入金额" v-model="form.maxMoney" type="number">
              <template slot="append">元</template>
            </el-input>
            <div class="yb_margin">
              计费规则：例如设置 起步3km内5元，每增加 1km 加 1 元，超过6km，每增加 1km 加 2 元。如果配送距离5km，配送费：5 +
              （5-3）X 1 = 7元；配送距离8km，配送费：5 + （8-3）X 2 = 15元。
            </div>
          </div>
        </el-form-item>
        <el-form-item label="特殊时间段" v-show="form.type=='1' || form.type=='2'">
          <div class="flex-1 mar_l15">
            <div class="time_item mar_b10" v-for="(item,index) in form.timeArr" :key="index">
              <el-time-select v-model="item.startTime" :picker-options="{start: '00:00',step: '00:30',end: '23:55'}" placeholder="选择时间" style="width: 109px"></el-time-select>
              <span class="mar_lr10">-</span>
              <el-time-select v-model="item.endTime" :picker-options="{start: '00:00',step: '00:30',end: '23:55', minTime: item.startTime}" placeholder="选择时间" style="width: 109px"></el-time-select>
              <el-input placeholder="另加配送费" type="number" v-model="item.money" class="inppsf mar_l20" style="width: 190px;">
                <template slot="append">元</template>
              </el-input>
              <el-button type="text" @click="deltimeInterval1(index)" class="fon_12 mar_l10">删除</el-button>
            </div>
            <el-button v-show="form.timeArr.length<3" type="text" @click="addtimeInterval1">
              <Icon type="md-add" />添加特殊时段
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label v-show="form.type=='3'" class="deliverLeft" style="margin-left: -160px;">
          <div class="flext">
            <div>
              <div class="deliveryScopeItem mar_b10 rel" v-for="(item,pIndex) in areaArr" :key="pIndex" :class="item.color" @click="oncloseicon(pIndex)" v-model="item.selected = false">
                <div class="cancleDeliveryScope ba_f ab flex t_c curs" @click="delDeliveryMethod(pIndex)">
                  <i class="el-icon-circle-close cancle-icon"></i>
                </div>
                <div class="deliveryScopeItemLine shape mar_b5 flex-start">
                  <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">形 状：</label>
                  <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                    <el-radio v-model="item.shape" :label="1" @change="handleChange(1,pIndex)">圆形</el-radio>
                    <el-radio v-model="item.shape" :label="2" @change="handleChange(2,pIndex)">多边形</el-radio>
                  </div>
                </div>
                <div class="deliveryScopeItemLine mar_b5 flex-start">
                  <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">配送费：</label>
                  <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                    <el-input placeholder type="number" v-model="item.money" class="inppsf">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
                <div class="deliveryScopeItemLine mar_b5 flex-start">
                  <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">起送价：</label>
                  <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                    <el-input placeholder type="number" v-model="item.startMoney" class="inppsf">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </div>
                <div class="deliveryScopeItemLine mar_b5 flex-start" v-show="item.shape==1">
                  <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">半 径：</label>
                  <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                    <el-input placeholder type="number" v-model="item.radius" @input="radius($event,pIndex)" class="inppsf">
                      <template slot="append">米</template>
                    </el-input>
                  </div>
                </div>
                <div class="deliveryScopeItemLine mar_b5 flex-start">
                  <label class="deliveryScopeItemLineTitle fon_14 flex-justify mar_l15">特殊时段：</label>
                  <div class="deliveryScopeItemLineCont flex-1 mar_l15">
                    <div class="time_item mar_b10" v-for="(item,index) in item.timeArr" :key="index">
                      <el-time-select v-model="item.startTime" :picker-options="{start: '00:00',step: '00:05',end: '23:55'}" placeholder="选择时间" style="width: 109px"></el-time-select>
                      <span class="mar_lr10">-</span>
                      <el-time-select v-model="item.endTime" :picker-options="{start: '00:00',step: '00:05',end: '23:55',minTime: item.startTime}" placeholder="选择时间" style="width: 109px"></el-time-select>
                      <el-input placeholder="另加配送费" type="number" v-model="item.money" class="inppsf mar_t5" style="width: 190px;">
                        <template slot="append">元</template>
                      </el-input>
                      <el-button type="text" @click="deltimeInterval(pIndex)" class="fon_12 mar_l10">删除</el-button>
                    </div>
                    <el-button v-show="item.timeArr.length<3" type="text" @click="addtimeInterval(pIndex)">
                      <Icon type="md-add" />添加时段
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="add-delivery-scope subjectcolor2 curs fon_14" @click="addDeliveryMethod">+添加配送范围</div>
            </div>
            <div class="flex-1">
              <div class="nofull-map-wrap flex-1" id="container"></div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
    <el-dialog title="配送时间" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
      <el-form :model="form" label-width="180px">
        <el-form-item label="三公里内">
          <el-input placeholder v-model="form.withinTime" type="number">
            >
            <template slot="append">分钟</template>
          </el-input>
          <div class="yb_margin">请输入三公里内配送时长</div>
        </el-form-item>
        <el-form-item label="三公里外">
          <el-input placeholder v-model="form.exceedTime" type="number">
            <template slot="prepend">每增加一公里</template>
            <template slot="append">分钟</template>
          </el-input>
          <div class="yb_margin">请输入三公里外每增加一公里增加的时长</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getStoreConfig, postStoreConfig } from '@/api/setup';
import { getStoreBasic } from '@/api/shop';

export default {
  created() {
    if (this.$route.query.storeId) {
      this.storeId = this.$route.query.storeId;
      this.initData();
    }
  },
  data() {
    return {
      activeName: 'psqy',
      form: {
        lng: 114.304692,
        lat: 30.59331,
        address: '湖北省武汉市武昌区沿江大道230号',
        withinTime: '',
        exceedTime: '',
        type: '1',
        range: '',
        calculationType: '',
        startMoney: '',
        // fullMoney: '',
        distanceStartMoney: '',
        startDistance: '',
        overstepMoney: '',
        overstepDistance: '',
        overstepDistanceMoney: '',
        maxMoney: '',
        fixedStartMoney: '',
        fixedFullMoney: '',
        money: '',
        timeArr: []
      },
      areaArr: [
        {
          color: 'ss1',
          shape: 1,
          money: 5,
          startMoney: 20,
          // fullMoney: 50,
          radius: 2000,
          selected: false,
          circle: '',
          details: '',
          lng: '',
          lat: '',
          timeArr: []
        }
      ],
      dialogFormVisible: false,
      mapAddress: '湖北省武汉市',
      mapLat: 30.59331,
      mapLng: 114.304692,
      sstt: ['ss1', 'ss2', 'ss3', 'ss4', 'ss5'],
      selectCol: ['ss1'],
      markersArray: [],
      map: '',
      center: '',
      path: [],
      color1: 153,
      color2: 214,
      color3: 255,
      xz: 0,
      storeId: ''
    };
  },
  methods: {
    handleClick() {
      if (this.activeName == 'tcps') {
        this.$router.push(`/storecitydistribution?storeId=${this.storeId}`);
      } else if (this.activeName == 'psqy') {
        this.$router.push(`/storeregiondistribution?storeId=${this.storeId}`);
      }
    },
    async initData() {
      const { data } = await getStoreConfig({ ident: 'delivery', storeId: this.storeId });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (data.type == '3') {
        for (let i = 0; i < data.areaArr.length; i++) {
          data.areaArr[i].circle = '';
        }
        if (data.areaArr) {
          this.areaArr = data.areaArr.map((v) => ({
            shape: v.shape,
            money: v.money,
            startMoney: v.startMoney,
            // fullMoney: v.fullMoney,
            lng: v.lng,
            lat: v.lat,
            circle: v.circle,
            radius: +v.radius,
            selected: v.selected,
            color: v.color,
            details: v.details,
            timeArr: v.timeArr
          }));
        }
        setTimeout(() => {
          this.init();
        }, 0);
      }
    },
    addtimeInterval1() {
      let specObj = { startTime: '00:00', endTime: '00:00', money: '' };
      this.$set(this.form.timeArr, this.form.timeArr.length, specObj);
    },
    deltimeInterval1(index) {
      this.$delete(this.form.timeArr, index);
    },
    addDeliveryMethod() {
      let list = [];
      //  if(this.areaArr.length==1){
      //   console.log('123')
      //   this.sstt.shift()
      //   console.log('234',this.sstt)
      // }
      list = this.sstt.filter((item) => {
        return this.selectCol.indexOf(item) === -1;
      });
      console.log(this.areaArr, list);
      console.log('listlistlist', list);
      console.log('changdu', this.areaArr.length);
      if (this.areaArr.length >= 1) {
        list.shift();
      }
      if (this.areaArr.length > 3) {
        // list.push(['ss1'])
        list = [];
        list = this.sstt.filter((item) => {
          return this.selectCol.indexOf(item) === -1;
        });
      }
      if (this.areaArr.length > 4) return alert('最多添加5组数据');
      if (list[0] == 'ss1') {
        var color1 = 64;
        var color2 = 158;
        var color3 = 255;
      }
      if (list[0] == 'ss2') {
        var color1 = 103;
        var color2 = 194;
        var color3 = 58;
      }
      if (list[0] == 'ss3') {
        var color1 = 230;
        var color2 = 162;
        var color3 = 60;
      }
      if (list[0] == 'ss4') {
        var color1 = 245;
        var color2 = 108;
        var color3 = 108;
      }
      if (list[0] == 'ss5') {
        var color1 = 255;
        var color2 = 127;
        var color3 = 0;
      }
      let specObj = {
        color: list[0],
        shape: 1,
        money: 5,
        radius: 2000,
        startMoney: 20,
        // fullMoney: 50,
        selected: false,
        circle: new qq.maps.Circle({
          //圆形
          //多边形是否可点击。
          center: this.center,
          clickable: true,
          //鼠标在多边形内的光标样式。
          cursor: 'auto',
          //多边形是否可编辑。
          editable: true,
          //圆形的半径。
          radius: 2000,
          //多边形的填充色，可通过Color对象的alpha属性设置透明度。
          //fillColor: '#5f9ea0',
          fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
          //要显示多边形的地图。
          map: this.map,
          //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
          strokeColor: new qq.maps.Color(color1, color2, color3, 1),
          //多边形的边框样式。实线是solid，虚线是dash。
          strokeDashStyle: 'solid',
          //多边形的边框线宽。
          strokeWeight: 3,
          //多边形是否可见。
          visible: true,
          //多边形的zIndex值。
          zIndex: 1000
        }),
        timeArr: []
      };
      qq.maps.event.addListener(specObj.circle, 'radius_changed', (event) => {
        this.areaArr[this.xz].radius = Math.round(event.target.radius);
        console.log('半径' + event.target.radius);
      });
      qq.maps.event.addListener(specObj.circle, 'center_changed', function (event) {
        console.log('中心点' + event.target.center);
      });
      this.$set(this.areaArr, this.areaArr.length, specObj);
      // this.$set(this.areaArr[index], selected, true)
      this.$set(this.selectCol, this.selectCol.length, list[0]);
      console.log(this.areaArr, this.areaArr.length, specObj, this.sstt, this.selectCol);
      this.oncloseicon(this.areaArr.length - 1);
    },
    //删除地图
    delDeliveryMethod(index) {
      let list = [];
      if (this.areaArr[index].shape == 1) {
        this.areaArr[index].circle.setMap(null);
      } else {
        this.areaArr[index].details.setMap(null);
      }
      list = this.sstt.filter((item) => {
        return this.selectCol.indexOf(item) === -1;
      });
      this.$delete(
        this.selectCol,
        this.selectCol.findIndex((item) => item == this.areaArr[index].color)
      );
      this.$delete(this.areaArr, index);
    },
    //新增时间段
    addtimeInterval(pindex) {
      for (let i = 0; i < this.areaArr.length; i++) {
        let specObj = { startTime: '00:00', endTime: '00:00', money: '' };
        if (pindex == i) {
          this.$set(this.areaArr[i].timeArr, this.areaArr[i].timeArr.length, specObj);
        }
      }
    },
    //删除时间段
    deltimeInterval(pindex) {
      for (let i = 0; i < this.areaArr.length; i++) {
        if (pindex == i) {
          this.$delete(this.areaArr[i].timeArr, pindex);
        }
      }
    },
    async psType(val) {
      if (val == '3') {
        setTimeout(() => {
          this.init();
        }, 0);
      }
    },
    async init() {
      const { data } = await getStoreBasic({ id: this.storeId });
      var that = this;
      var lat = data.lat ? +data.lat : 30.59331;
      var lng = data.lng ? +data.lng : 114.304692;
      that.center = new qq.maps.LatLng(lat, lng);
      that.map = new qq.maps.Map(document.getElementById('container'), {
        center: that.center,
        zoom: 13
      });
      that.path = [new qq.maps.LatLng(lat + 0.018, lng + 0.018), new qq.maps.LatLng(lat - 0.018, lng + 0.018), new qq.maps.LatLng(lat - 0.018, lng - 0.018), new qq.maps.LatLng(lat + 0.018, lng - 0.018)];
      qq.maps.event.addListener(that.map, 'click', function (event) {
        //alert(that.xz)
        //alert(event.latLng)
        console.log(that.areaArr);
      });
      for (var i = 0, l = that.areaArr.length; i < l; i++) {
        console.log(666, that.areaArr.length);
        if (this.areaArr[i].color == 'ss1') {
          var color1 = 64;
          var color2 = 158;
          var color3 = 255;
        }
        if (this.areaArr[i].color == 'ss2') {
          var color1 = 103;
          var color2 = 194;
          var color3 = 58;
        }
        if (this.areaArr[i].color == 'ss3') {
          var color1 = 230;
          var color2 = 162;
          var color3 = 60;
        }
        if (this.areaArr[i].color == 'ss4') {
          var color1 = 245;
          var color2 = 108;
          var color3 = 108;
        }
        if (this.areaArr[i].color == 'ss5') {
          var color1 = 255;
          var color2 = 127;
          var color3 = 0;
        }
        if (i == 0) {
          var editable = true;
          var zIndex = 1000;
        } else {
          var editable = false;
          var zIndex = 100;
        }
        if (that.areaArr[i].shape == 1) {
          //圆形
          that.areaArr[i].circle = new qq.maps.Circle({
            //圆形
            //多边形是否可点击。
            center: that.areaArr[i].lat ? new qq.maps.LatLng(that.areaArr[i].lat, that.areaArr[i].lng) : that.center,
            clickable: true,
            //鼠标在多边形内的光标样式。
            cursor: 'auto',
            //多边形是否可编辑。
            editable: editable,
            //圆形的半径。
            radius: that.areaArr[i].radius,
            //多边形的填充色，可通过Color对象的alpha属性设置透明度。
            //fillColor: '#5f9ea0',
            fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
            //要显示多边形的地图。
            map: that.map,
            //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
            strokeColor: new qq.maps.Color(color1, color2, color3, 1),
            //多边形的边框样式。实线是solid，虚线是dash。
            strokeDashStyle: 'solid',
            //多边形的边框线宽。
            strokeWeight: 3,
            //多边形是否可见。
            visible: true,
            //多边形的zIndex值。
            zIndex: zIndex
          });
        } else {
          //多边形
          // res=await this.request({data:{id:{$store['id']},item:i},url:"{$_W['siteroot']}/app/index.php?i={$_W['uniacid']}&c=entry&do=PolygonPath&m={$_GPC['m']}"})
          // if(res.errno==0){
          var polygonDetails = [];
          for (var k = 0, j = this.areaArr[i].details.length; k < j; k++) {
            polygonDetails.push(new qq.maps.LatLng(this.areaArr[i].details[k].lat, this.areaArr[i].details[k].lng));
          }
          console.log(polygonDetails);
          // }
          that.areaArr[i].details = new qq.maps.Polygon({
            //多边形
            //多边形是否可点击。
            clickable: true,
            //鼠标在多边形内的光标样式。
            cursor: 'auto',
            //多边形是否可编辑。
            editable: editable,
            //多边形的填充色，可通过Color对象的alpha属性设置透明度。
            //fillColor: '#5f9ea0',
            fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
            //要显示多边形的地图。
            map: that.map,
            //多边形的路径，以经纬度坐标数组构成。
            path: polygonDetails,
            //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
            strokeColor: new qq.maps.Color(color1, color2, color3, 0.5),
            //多边形的边框样式。实线是solid，虚线是dash。
            strokeDashStyle: 'solid',
            //多边形的边框线宽。
            strokeWeight: 3,
            //多边形是否可见。
            visible: true,
            //多边形的zIndex值。
            zIndex: zIndex
          });
        }
      }
      qq.maps.event.addListener(that.areaArr[that.xz].circle, 'click', function (event) {
        //alert(that.xz)
        //alert(event.latLng)
      });
      new qq.maps.Marker({
        position: new qq.maps.LatLng(lat, lng),
        draggable: true,
        animation: qq.maps.MarkerAnimation.DROP,
        map: that.map
      });
      qq.maps.event.addListener(that.areaArr[that.xz].circle, 'radius_changed', function (event) {
        that.areaArr[that.xz].radius = Math.round(event.target.radius);
        console.log('半径' + event.target.radius);
      });
      qq.maps.event.addListener(that.areaArr[that.xz].circle, 'center_changed', function (event) {
        console.log('中心点' + event.target.center);
      });
      qq.maps.event.addListener(that.areaArr[that.xz].details, 'adjustNode', function (event) {
        console.log('多边形路径' + event.path.elems);
      });
      qq.maps.event.addListener(that.areaArr[that.xz].details, 'insertNode', function (event) {
        console.log('多边形路径' + event.path.elems);
      });
      qq.maps.event.addListener(that.areaArr[that.xz].details, 'removeNode', function (event) {
        console.log('多边形路径' + event.path.elems);
      });
    },
    //单选按钮切换
    handleChange(value, index) {
      if (this.areaArr[index].color == 'ss1') {
        var color1 = 64;
        var color2 = 158;
        var color3 = 255;
      }
      if (this.areaArr[index].color == 'ss2') {
        var color1 = 103;
        var color2 = 194;
        var color3 = 58;
      }
      if (this.areaArr[index].color == 'ss3') {
        var color1 = 230;
        var color2 = 162;
        var color3 = 60;
      }
      if (this.areaArr[index].color == 'ss4') {
        var color1 = 245;
        var color2 = 108;
        var color3 = 108;
      }
      if (this.areaArr[index].color == 'ss5') {
        var color1 = 255;
        var color2 = 127;
        var color3 = 0;
      }
      if (value == 2) {
        //this.areaArr[index].circle.setVisible(false)
        this.areaArr[index].circle.setMap(null);
        this.areaArr[index].details = new qq.maps.Polygon({
          //多边形
          //  //多边形是否可点击。
          clickable: true,
          //鼠标在多边形内的光标样式。
          cursor: 'auto',
          //多边形是否可编辑。
          editable: true,
          //多边形的填充色，可通过Color对象的alpha属性设置透明度。
          //fillColor: '#5f9ea0',
          fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
          //要显示多边形的地图。
          map: this.map,
          //多边形的路径，以经纬度坐标数组构成。
          path: this.path,
          //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
          strokeColor: new qq.maps.Color(color1, color2, color3, 1),
          //多边形的边框样式。实线是solid，虚线是dash。
          strokeDashStyle: 'solid',
          //多边形的边框线宽。
          strokeWeight: 3,
          //多边形是否可见。
          visible: true,
          //多边形的zIndex值。
          zIndex: 1000
        });
        qq.maps.event.addListener(this.areaArr[index].details, 'adjustNode', function (event) {
          console.log('多边形路径' + event.path.elems);
        });
        qq.maps.event.addListener(this.areaArr[index].details, 'insertNode', function (event) {
          console.log('多边形路径' + event.path.elems);
        });
        qq.maps.event.addListener(this.areaArr[index].details, 'removeNode', function (event) {
          console.log('多边形路径' + event.path.elems);
        });
      } else {
        this.areaArr[index].details.setMap(null);
        this.areaArr[index].circle = new qq.maps.Circle({
          //圆形
          //多边形是否可点击。
          center: this.center,
          clickable: true,
          //鼠标在多边形内的光标样式。
          cursor: 'auto',
          //多边形是否可编辑。
          editable: true,
          //圆形的半径。
          radius: 2000,
          //多边形的填充色，可通过Color对象的alpha属性设置透明度。
          //fillColor: '#5f9ea0',
          fillColor: new qq.maps.Color(color1, color2, color3, 0.5),
          //要显示多边形的地图。
          map: this.map,
          //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
          strokeColor: new qq.maps.Color(color1, color2, color3, 1),
          //多边形的边框样式。实线是solid，虚线是dash。
          strokeDashStyle: 'solid',
          //多边形的边框线宽。
          strokeWeight: 3,
          //多边形是否可见。
          visible: true,
          //多边形的zIndex值。
          zIndex: 1000
        });
        qq.maps.event.addListener(this.areaArr[index].circle, 'radius_changed', (event) => {
          this.areaArr[index].radius = Math.round(event.target.radius);
          console.log('半径' + event.target.radius);
        });
        qq.maps.event.addListener(this.areaArr[index].circle, 'center_changed', function (event) {
          console.log('中心点' + event.target.center);
        });
      }
      console.log('q按钮' + value);
      // this.hideshow=this.areaArr.length;
    },
    //点击关闭图标
    oncloseicon(index) {
      //alert(index)
      this.xz = index;
      this.$set(this.areaArr[index], 'selected', true);
      console.log(this.areaArr[index]);
      if (this.areaArr[index].shape == 2) {
        this.areaArr[index].details.setOptions({
          editable: true,
          zIndex: 1000
        });
      } else {
        this.areaArr[index].circle.setOptions({
          editable: true,
          zIndex: 1000
        });
      }
      for (let i = 0; i < this.areaArr.length; i++) {
        if (i != index) {
          if (this.areaArr[i].shape == 2) {
            this.areaArr[i].details.setOptions({
              editable: false,
              zIndex: 100
            });
          } else {
            this.areaArr[i].circle.setOptions({
              editable: false,
              zIndex: 100
            });
          }
        }
      }
    },
    //修改半径
    radius(e, index) {
      this.areaArr[index].circle.setRadius(+e);
    },

    submitForm() {
      console.log(this.areaArr);
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          // console.log(123)
          this.form.ident = 'delivery';
          this.form.storeId = this.storeId;
          if (this.form.type == '3') {
            var areaArr = [];
            for (var i = 0, l = this.areaArr.length; i < l; i++) {
              if (this.areaArr[i].shape == 1) {
                //圆形
                areaArr.push({
                  shape: 1,
                  color: this.areaArr[i].color,
                  lat: this.areaArr[i].circle.center.lat,
                  lng: this.areaArr[i].circle.center.lng,
                  radius: this.areaArr[i].radius,
                  money: this.areaArr[i].money,
                  startMoney: this.areaArr[i].startMoney,
                  // fullMoney: this.areaArr[i].fullMoney,
                  selected: this.areaArr[i].selected,
                  timeArr: this.areaArr[i].timeArr
                });
              } else {
                var details = [];
                for (var k = 0, j = this.areaArr[i].details.path.elems.length; k < j; k++) {
                  details.push({
                    lat: this.areaArr[i].details.path.elems[k].lat,
                    lng: this.areaArr[i].details.path.elems[k].lng
                  });
                }
                areaArr.push({
                  shape: 2,
                  details: details,
                  radius: 0,
                  money: this.areaArr[i].money,
                  startMoney: this.areaArr[i].startMoney,
                  // fullMoney: this.areaArr[i].fullMoney,
                  color: this.areaArr[i].color,
                  selected: this.areaArr[i].selected,
                  timeArr: this.areaArr[i].timeArr
                });
              }
            }
            this.form.areaArr = areaArr;
          }
          const { msg } = await postStoreConfig(this.form);
          this.$baseMessage(msg, 'success');
          this.initData();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.nofull-map-wrap {
  margin-left: 50px;
  border: 1px solid #ccc;
}

.deliveryScopeItem .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding-right: 0px;
}

.dtu .el-form-item__content {
  line-height: 34px;
}

.dtu .el-input__icon {
  line-height: 34px;
}

.cancle-icon {
  width: 18px;
  height: 18px;
}

.cancleDeliveryScope {
  width: 20px;
  height: 20px;
  right: 0px;
  top: 1px;
}

.deliveryScopeItem {
  width: 400px;
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-image: initial;
  padding-right: 10px;
}

.deliveryScopeItemLine .deliveryScopeItemLineTitle {
  flex: 0 0 85px;
}

.deliveryScopeItemLine .deliveryScopeItemLineCont .el-input-group {
  width: auto;
}

.dtu.el-form-item__content .el-input-group {
  vertical-align: middle;
}

.ss1 {
  border-color: rgb(64, 158, 255);
}

.ss2 {
  border-color: rgb(103, 194, 58);
}

.ss3 {
  border-color: rgb(230, 162, 60);
}

.ss4 {
  border-color: rgb(245, 108, 108);
}

.ss5 {
  border-color: rgb(255, 127, 0);
}

#container {
  width: 1100px;
  min-height: 800px;
  height: 100%;
}
</style>
